<template>
    <div>
        <div class="goods">
        <div class="menu-wrapper">
            <ul>
                <li class="menu-item" :class="{current:index===currentIndex}"
                    v-for="(good ,index) in goods" :key="index" @click="clickMenuItem(index)">
                    <span>
                        <img  class="icon" :src="good.icon" alt="分类" v-if="good.icon">
                        {{good.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="food-wrapper" ref="foodbox">
            <div >
                <div class="food-items" v-for="( good ,index) in goods" :key="index">
                    <p class="food-title">{{good.name}}</p>
                    <ul >
                        <li class="food-item border-1px"
                            v-for="(food, index) in good.foods" :key="index"
                            @click="showFood(food)"
                        >
                            <img class="food-item-icon " :src="food.icon" alt="">
                            <div class="food-item-right">
                                <div class="food-name" >{{food.name}}</div>
                                <p class="desc">{{food.description}}</p>
                                <p> <span>月销售{{food.sellCount}}份</span>&nbsp&nbsp&nbsp<span>好评率{{food.rating}}</span> </p>
                                <p class="color">￥{{food.price}}</p>
                                <div class="cartControl">
                                    <CartControl :food="food"></CartControl>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        <Food :food="food" ref="food"></Food>

        <ShopCart></ShopCart>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import BScroll from 'better-scroll'
    import Food from '../../../components/Food/Food.vue'
    import CartControl from '../../../components/CartControl/CartControl.vue'
    import ShopCart from '../../../components/ShopCart/ShopCart.vue'
    export default {
        name: "ShopGoods",
        computed:{
            ...mapState(['goods']),

            //监听index变换，控制menu的item变底色
            currentIndex(){
                const {tops,scrollY}=this;
                let index=tops.findIndex((top,index)=>{
                    //return scrollY<top
                    return scrollY >= top && scrollY < tops[index + 1]
                });

                return index;
            }
        },
        data(){
          return {
              tops:[],
              scrollY:0,
              food:{}

          }
        },
        components:{
            CartControl,
            Food,
            ShopCart
        },
        methods:{
            _initScroll(){
                // let  menubox=document.getElementsByClassName("menu-wrapper")[0];
                this.menuScroll=new BScroll('.menu-wrapper',{click:true});//直接写选择器在里面也可以，不一定要先获取dom

                // let  foodbox=document.getElementsByClassName("food-wrapper")[0];
                let foodbox=this.$refs.foodbox;//两种获取dom方式都可以...ref
                this.foodsScroll=new BScroll(foodbox,{ //用const不能全局使用，用this.好
                    probeType:2 ,//2惯性滑动不会触发,3会触发惯性滑动有实时更新index效果
                    click:true
                });

                this.foodsScroll.on('scroll',({x,y})=>{ //监听手指滚动滑动事件
                    //console.log(x+"foods分类滑动了"+y)
                    // console.log({x,y})
                    this.scrollY=Math.abs(y)
                });
                this.foodsScroll.on('scrollEnd',({x,y})=>{ //触发停止滑动事件，没有惯性实时更新index效果
                    this.scrollY=Math.abs(y)
                })
            },
            _initTops(){
                let top=0;
                let tops=[];
                tops.push(top);
                const lis=document.getElementsByClassName("food-items");
                //lis其实是一个伪数组，HTML选择器元素集合 ，前面是数组后面是length等属性。
                //console.log(lis instanceof Array )   ; false
               // console.log( Object.prototype.toString.call(lis)   ) ;[object HTMLCollection]
               //console.log(Array.prototype.slice.call(lis)) ; //数组
                Array.prototype.slice.call(lis).forEach(item=>{
                    top+=item.clientHeight;
                    tops.push(top)
                });
                this.tops=tops;
                console.log(tops,"数据获取后，在mounted挂载后nextTick已经取得数据。收集食物分类集合高度组成列表")
            },
            clickMenuItem(index){
                const y=this.tops[index];
                //立即更新scrollY，通过computed监听currentIndex的依赖变换，index，立即显示当前分类项
                this.scrollY=y;
                //通过scrollEnd监听滑动，也会改变scrollY的值，会慢一些
                //平滑到目标
                this.foodsScroll.scrollTo(0,-y,200)
                console.log("hhhhhhh,选择了当前分类")
            },
            showFood(food){
                this.food=food;
                this.$refs.food.toggle()
                }

        },
        mounted(){
            this.$store.dispatch("getShopGoods",()=>{
                this.$nextTick(()=>{
                    this._initTops();//挂载后其实lis还没有获取，里面是空的。数据未更新，所以用nextTick
                    this._initScroll();
                })
            });//获取食物信息列表，goods

            var qq="   a a    ";//原来trim能用
            console.log(qq.trim().length);

        },
        // updated(){ 用这个更新后操作也可以
        //     const lis=document.getElementsByClassName("food-items");
        //     console.log(lis.length);
        //     console.log(lis)
        // }

    }
</script>

<style lang="stylus" scoped>
    @import '../../../assets/mixin.styl'
.goods
    display:flex
    position:absolute
    top:4rem
    left:0
    right:0
    bottom:1rem
    //background:r
    .menu-wrapper
        width:2rem
        font-size:0.3rem
        overflow:hidden
        //background:#f3f5f7
        .menu-item
            text-align:center
            height:1rem
            line-height:1rem
            background:rgba(88,100,88,0.2)
            &.current
                background:#fff
            .icon
                width:0.3rem
                height:0.3rem
                display:inline-block
    .food-wrapper
        flex:1
        overflow:hidden
        .food-items
            .food-title
                font-size: 0.3rem
                background :#ccc
                height:0.5rem
                line-height:0.5rem
            .food-item
                padding:0
                margin:0
                display:flex
                bottom-border-1px( rgba(20,30,50,0.8) )
                margin-left:0.3rem
                .food-item-icon
                    width:1.5rem
                    height:1.5rem
                    display:block
                .food-item-right
                    flex:1
                    //background:#fff
                    position:relative
                    font-size:0.25rem
                    padding-left:0.2rem
                    .food-name
                        font-size:0.3rem
                        height:0.5rem
                        line-height:0.5rem
                       // background:yellow
                    .desc
                        max-width :3rem
                        //background:green
                        ellipsis()
                    .color
                        color:orangered
                    p
                        height:0.5rem
                        line-height:0.5rem
                    .cartControl
                        position:absolute
                        bottom:0.1rem
                        right: 0.3rem
                        width:2rem
                        height:0.5rem
                         //background:blue


</style>
